<template>
	<view class="enterprise">
		<z-paging
			ref="paging"
			:refresher-out-rate="0.8"
			:auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false"
			bg-color="#fff"
			:refresher-status.sync="refresherStatus"
			@query="queryList"
			v-model="dataList"
		>
			<view class="headBox" slot="top">
			    <!-- 搜索 -->
			    <view class="search flex_wrap">
			        <view class="search_t">
			            <view
			                style="width: 490rpx; margin: 10rpx 0 0 20rpx"
			            >
			                <u-input
			                    prefixIcon="search"
			                    border="none"
			                    v-model="keyword"
			                    prefixIconStyle="font-size: 48rpx;color: #999"
			                    placeholderStyle="font-size: 28rpx;color: #999"
			                    :customStyle="{ background: '#F6F6F6' }"
			                    placeholder="点击搜索"
			                ></u-input>
			            </view>
			            <view class="search_type" @click="doSearch">
			                搜索
			            </view>
			        </view>
			    </view>
			</view>
			<!-- 分类 -->
			<view class="typeBox flex_wrap" >
				<view
					:class="
					    tabCurrent == typeIndex ? 'typeitem' : 'typeitemed'
					"
					v-for="(typeItem, typeIndex) in typeTreeList"
					:key="typeIndex"
					@click="changeTab(typeItem, typeIndex)"
				>{{typeItem.typeName}}</view>
			</view>
			<view class="enterprise_details">
				<view class="news">
					<view
						class="news_list"
						v-for="(item, index) in dataList"
						:key="index"
						@click="goPageDetail(item)"
					>
						<view class="news_detail flex_wrap row_between">
							<u-image
								height="152rpx"
								width="274rpx"
								:src="item.videoCover"
								mode="aspectFill"
								radius="16rpx"
							/>
							<view>
								{{ item.videoName }}
							</view>
							<view class="box">
								<view class="iconBox"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import { baseUrl } from "@/config/tendIdConfig"
	import {
		teachPageVideo,
		videoTypeTree
	} from "@/api/enterprise.js";
	export default {
		data() {
			return {
				dataList: [],
				keyword:'',
				typeTreeList:[],
				tabCurrent: 0,
				typeId:'',//类型id
			}
		},
		onLoad() {
			this.videoTypeTreeList()
		},
		methods: {
			changeTab(typeItem, typeIndex) {
				this.tabCurrent = typeIndex;
				
				let obj = { videoId: typeItem.id };
				// 将 videoId 的值修改为数组形式
				this.typeId = this.tabCurrent ? [obj.videoId] : '';
				console.log(obj,'obj.videoId',this.typeId);
				this.$refs.paging.reload();
			},
			goPageDetail(item) {
				const url = "/pages_operate/videoPage/detail?videoSeries=" + item.videoSeries
				uni.navigateTo({
					url: url
				})
			},
			doSearch() {
				this.$refs.paging.reload();
			},
			async queryList(pageNum, pageSize) {
				const params = {
					pageNum,
					pageSize,
					recordType: 5,
					videoDiversity: 1
				};
				if (this.keyword) params.videoName = this.keyword;
				if (this.typeId) params.videoTypeIdSet = this.typeId;
				const result = await teachPageVideo(params);
				this.$refs.paging.complete(result.data.rows)
			},
			async videoTypeTreeList(){
				const params = {
					parentId: 0,
					typeModule: "5"
				};
				const res = await videoTypeTree(params);
				this.typeTreeList =  [{
					typeModule: "5",
					id: '',
					typeName: "全部",
				}].concat(res.data ?? [])
				console.log(this.typeTreeList,'this.typeTreeList》》》》')
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 企業頁面 */
	.enterprise {
		background: #ffffff;
		width: 100%;
		height: 100vh;
		color: #333333;
	}
	.enterprise_details {
		padding: 10rpx 28rpx;
	}
	.enterprise_top {
		display: flex;
		font-size: 32rpx;
		color: #3d3d3d;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.enterprise_bg {
		display: block;
		width: 12rpx;
		height: 12rpx;
		background: #588bf3;
		margin-right: 18rpx;
		border-radius: 50%;
	}

	.news {
		height: auto;
		overflow: hidden;
	}

	.news_list {
		display: flex;
		position: relative;
		flex-direction: row;
	}

	.news_detail {
		padding: 24rpx 0 3rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;
		view {
			padding-left: 30rpx;
			// width: 100%;
			box-sizing: border-box;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			-webkit-box-orient: vertical;
			font-size: 32rpx;
			color: #3d3d3d;
			line-height: 54rpx;
		}
		.box {
			width: 274rpx;
			height: 152rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: absolute;
			top: 24rpx;
			left: 0;
			background: rgba(0, 0, 0, 0.2);
			.iconBox {
				width: 76rpx;
				height: 76rpx;
				background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/26/9213c9113ad34df6b80ecda7346dd543.png);
				background-size: contain;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	
	.headBox {
	    position: relative;
	    background-color: #fff;
	}
	.search {
	    padding: 40rpx 28rpx 30rpx;
	    position: relative;
	}
	.search_t {
	    background: #f6f6f6;
	    border-radius: 64rpx;
	    font-weight: none;
	    display: flex;
	    justify-content: space-between;
	    flex: 1;
	}
	.search_type {
	    width: 104rpx;
	    height: 64rpx;
	    background: #588bf3;
	    border-radius: 0px 64rpx 64rpx 0px;
	    color: #fff;
	    line-height: 64rpx;
	    font-size: 28rpx;
	    font-weight: bold;
	    text-align: center;
	}
	.typeBox{
		padding: 0 28rpx ;
		.typeitem{
			padding: 10rpx 14rpx;
			background: #588BF3;
			border-radius: 8rpx;
			color: #fff;
			margin-right: 32rpx;
		}
		.typeitemed{
			padding: 8rpx 12rpx;
			background: #F6F6F6;
			border-radius: 8rpx;
			color: #3D3D3D;
			margin-right: 32rpx;
		}
	}
</style>
